<template>
    <van-nav-bar title="类目分类" left-arrow text-light @click-left="onClickLeft" />
    <van-tree-select v-model:active-id="rightactiveId" 
    v-model:main-active-index="leftactiveIndex"
     :items="categorydata">
        <!--宫格模式显示数据-->
        <template #content>
            <van-grid :column-num="3" icon-size="50px">
                <van-grid-item v-for="item in categorydata[leftactiveIndex].children" :key="item.id" :icon="item.img" :text="item.name" />
            </van-grid>

        </template>

    </van-tree-select>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
//右侧选中项的 id
const rightactiveId = ref(1)
//左侧选中项的索引
const leftactiveIndex = ref(0)
import { CategoryApi } from '@/api'

const onClickLeft = () => history.back();
const categorydata = ref([
      {
        text: '浙江',
        children: [
            { text: '杭州', id: 1, img:'https://m.360buyimg.com/babel/jfs/t1/217854/10/27047/1653/646dd370Fc2020081/be1066dbe34de67c.jpg'},
            { text: '温州', id: 2, img:"https://m.360buyimg.com/babel/jfs/t1/217854/10/27047/1653/646dd370Fc2020081/be1066dbe34de67c.jpg" },
          { text: '宁波', id: 3, disabled: true },
        ],
      },
    ])

onMounted(()=>{
    callCategoryApi()
})
const callCategoryApi=()=>{
    CategoryApi.select.cell().then((res: any) => {
        res.forEach((item: any) => {
          item.text =item.name
        })
        // console.log(item);
        
        let categorydata2 = res.reduce((newarray: any, current: any) => {
            current.children =res.filter((item:any)=>{
                return item.parentId === current.id
            })
            if(current.parentId === 0){
               newarray.push(current)
            }
            return newarray
        },[])
        console.log(categorydata2);
        
        categorydata.value = categorydata2

    })
}

</script>

<style scoped>
.van-nav-bar{
    background-color: rgb(202, 198, 198);
}
</style>